<template>
  <div>
    <el-container style="max-height: 100vh">
      <!-- 左侧边栏 -->
      <el-aside
        :width="asideWidth"
        style="min-height: 100vh; background-color: #001529; overflow-x: hidden"
      >
        <div
          style="
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
          "
        >
          <img
            src="@/assets/logo1.png"
            alt=""
            style="width: 40px; height: 40px; position: absolute; left: 12px"
          />
          <transition name="el-zoom-in-center">
            <span class="logo_title" v-show="!isCollapse"
              >乡镇农业产品<br />信息管理系统</span
            >
          </transition>
        </div>

        <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          :default-active="$route.path"
          style="border: none"
          background-color="#001529"
          text-color="rgba(255, 255, 255, 0.65)"
          active-text-color="#fff"
          router
        >
          <template v-for="item in menuList">
            <el-menu-item
              :index="item.path"
              v-if="item.path"
              @click="clickMenu(item)"
            >
              <i :class="item.meta.icon"></i>
              <span slot="title">{{ item.meta.title }}</span>
            </el-menu-item>

            <el-submenu :index="item.title" v-else>
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                v-for="(subItem, index) in item.children"
                :key="index"
                :index="subItem.path"
                @click="clickMenu(subItem)"
                >{{ subItem.meta.title }}
              </el-menu-item>
            </el-submenu>
          </template>
          <!-- <el-menu-item index="/menu">
            <i class="el-icon-menu"></i>
            <span slot="title">权限管理</span>
          </el-menu-item>
          <el-menu-item index="/test">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>

      <!-- 右边区域 -->
      <el-container>
        <!-- 头部区域 -->
        <el-header>
          <i
            :class="collapseIcon"
            style="font-size: 26px; cursor: pointer"
            @click="handleCollapse"
          ></i>

          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-left: 20px"
          >
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumb"
              :key="index"
              :to="{ path: item.path }"
            >
              {{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <div
            style="
              flex: 1;
              width: 0;
              display: flex;
              align-items: center;
              justify-content: flex-end;
            "
          >
            <i
              class="el-icon-quanping"
              style="font-size: 26px; cursor: pointer; padding-right: 20px"
              title="点击全屏"
              @click="handleFull"
            ></i>
            <!-- 头像 -->
            <el-dropdown placement="bottom" v-if="user.no">
              <div
                style="display: flex; align-items: center; cursor: pointer"
                @click="$router.push('/person')"
              >
                <img
                  :src="user.avatarUrl"
                  alt=""
                  style="
                    width: 40px;
                    height: 40px;
                    margin: 0 5px;
                    border-radius: 50%;
                  "
                />
                <span>{{ user.name }}</span>
              </div>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="$router.push('/person')"
                  >个人信息</el-dropdown-item
                >
                <el-dropdown-item @click.native="logout"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 没登录 -->
            <div v-else>
              请
              <span
                style="color: #6e77f2; cursor: pointer"
                @click="$router.push('/login')"
                >登录</span
              >
              /
              <span
                style="color: #180f98; cursor: pointer"
                @click="$router.push('/register')"
                >注册</span
              >
            </div>
          </div>
        </el-header>

        <div class="tagsView">
          <!-- 标签导航栏组件 -->
          <TagsView />
        </div>

        <!-- 主体区域 -->
        <el-main>
          <keep-alive :include="tags">
            <router-view />
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import TagsView from '@/components/TagsView.vue'

export default {
  name: 'Manager',
  components: {
    TagsView
  },
  data() {
    return {
      user: JSON.parse(localStorage.getItem('curUser')) || {},
      isCollapse: false, // 不收起菜单,
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      tags: this.$store.state.tags.map(v => v.name)
    }
  },
  created() {
    console.log('处理后的菜单列表为：', this.menuList)
    this.initTags()
  },
  // mounted() {
  //   window.addEventListener('setItemEvent', e => {
  //     if (e.key === 'curUser') {
  //       this.user = e.newValue
  //       console.log(this.user)
  //     }
  //   })
  // },
  computed: {
    menuList() {
      return this.$router.options.routes
        .find(
          v =>
            v.meta &&
            v.meta.title &&
            v.meta.title === '后台管理' &&
            v.children &&
            v.children.length > 0
        )
        .children.reduce((acc, route) => {
          // 检查 meta 信息是否有 parent
          if (route.meta && route.meta.parent && route.meta.parent.title) {
            // 检查是否已经存在 parent 对象
            if (
              !acc.some(
                v => v && v.title && v.title === route.meta.parent.title
              )
            ) {
              acc.push({
                title: route.meta.parent.title,
                icon: route.meta.parent.icon,
                children: [
                  {
                    path: route.path,
                    name: route.name,
                    meta: route.meta
                  }
                ]
              })
            } else {
              acc
                .find(v => v.title === route.meta.parent.title)
                .children.push({
                  path: route.path,
                  name: route.name,
                  meta: route.meta
                })
            }
          } else {
            acc.push({
              path: route.path,
              name: route.name,
              meta: route.meta
            })
          }
          return acc
        }, [])
    },
    // 面包屑数据
    breadcrumb() {
      // 根据路由配置meta中的showInbreadcrumb字段过滤
      let matchedArr = this.$route.matched.filter(item => {
        return item.meta.showInbreadcrumb
      })
      // 因为首页比较特殊，必须一直显示在面包屑第一个，如果没有首页路由信息，手动添加到最前面
      matchedArr.unshift({
        path: '/home',
        meta: {
          title: '首页',
          showInbreadcrumb: true
        }
      })
      return matchedArr
    }
  },
  watch: {
    '$store.state.tags': {
      handler: function () {
        this.tags = this.$store.state.tags.map(v => v.name)
        console.log(this.tags)
      },
      deep: true
    }
  },
  methods: {
    // 初始化 Tags，防止直接进入某个路由时，不会生成对应的 Tag
    initTags() {
      let menu = {}

      for (let i of this.menuList) {
        if (i.children) {
          for (let j of i.children) {
            if (j.path === this.$route.path) {
              menu = j
              break
            }
          }
        } else {
          if (i.path === this.$route.path) {
            menu = i
            break
          }
        }
      }

      console.log('直接进入路由：', menu)
      this.clickMenu(menu)
    },
    clickMenu(menu) {
      this.$store.commit('pushtags', menu)
    },
    logout() {
      localStorage.removeItem('curUser')
      this.$message.success('退出登录成功！')
      this.$router.push('/login')
    },
    handleFull() {
      document.documentElement.requestFullscreen()
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse
        ? 'el-icon-s-unfold'
        : 'el-icon-s-fold'
    }
  }
}
</script>

<style lang="less" scoped>
.el-menu--inline {
  background-color: #000c17 !important;

  .el-menu-item {
    background-color: #000c17 !important;
    padding-left: 44px !important;
  }
}
/deep/ .el-submenu__title,
.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  margin: 0 3px;
  min-width: 0 !important;
}
/deep/ .el-submenu__title:hover,
.el-submenu__title:hover i,
.el-menu-item:hover,
.el-menu-item:hover i {
  color: #fff !important;
}
.el-menu-item.is-active {
  // background-color: #1890ff !important;
  background-color: #2e8b57 !important;
  border-radius: 5px;
}
.el-menu-item i,
.el-submenu i {
  width: 18px !important;
}
.el-aside {
  transition: width 0.3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
.el-tooltip {
  display: flex !important;
  align-items: center;
  top: -2px;
}
.logo_title {
  font-weight: bold;
  color: #ddd;
  margin-left: 65px;
  min-width: 128px;
}

.el-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  // box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.tagsView {
  padding: 2px 10px;
  // border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 4px -2px rgba(0, 21, 41, 0.35);
  z-index: 10;
}
</style>
